<template>
  <div class="user-pie" ref="userPieRef"></div>
</template>

<script setup lang="ts">
import { getAdminAndUserCountAPI } from '@/api/overview'
import * as echarts from 'echarts'

import { onBeforeUnmount, onMounted, ref } from 'vue'
const userPieRef = ref()

let handleResize = () => {}
const userPie = async () => {
  data.value = await getAdminAndUserCountAPI()
  const myUserPie = echarts.init(userPieRef.value)
  myUserPie.setOption({
    title: {
      text: '管理与用户对比图',
      left: 'center',
      textStyle: {
        fontSize: 15
      }
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    grid: {
      top: '20%',
      bottom: '3%',
      right: '4%',
      left: '3%'
    },
    series: [
      {
        name: '管理与用户对比',
        type: 'pie',
        center: ['50%', '55%'],
        data: data.value.data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        labelLine: {
          length: 6,
          length2: 8
        }
      }
    ]
  })
  handleResize = () => {
    myUserPie.resize()
  }
  window.addEventListener('resize', handleResize)
}
const data = ref()

onMounted(() => {
  userPie()
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped></style>
